import { Meta, Story, Canvas, Props } from "@storybook/addon-docs";
import { withKnobs } from "@storybook/addon-knobs";
import { Fixed, Centered, LeftResizable, TopResizable, RightResizable, BottomResizable, Fill } from "../../";
import { red, green, blue, description } from "../Utils";
import { CommonHeader, PropsTable, PropsHeader, Prop, StandardProps } from "../Utils";

<CommonHeader />

<Meta title="Components/Fixed" component={Fixed} />

## Fixed

Top-level space with a fixed height and optional width.

### With width specified

<Canvas>
	<Story name="With width">
		<Fixed style={blue} width={300} height={300}>
			{description("Fixed 300px x 300px")}
		</Fixed>
	</Story>
</Canvas>

### Without a width specified

<Canvas>
	<Story name="Without width">
		<Fixed style={blue} height={300}>
			{description("Fixed 100% x 300px")}
		</Fixed>
	</Story>
</Canvas>

### Properties

<Story name="Properties">
	<PropsTable>
		<PropsHeader>Fixed properties</PropsHeader>
		<Prop name="width" type="number | string" description="Optional width of space. When not specified the space will fill 100% of it's container." />
		<Prop name="height" type="number | string" description="Height of space." />
		<StandardProps />
	</PropsTable>
</Story>